<template>
  <div ref="menu">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      :background-color="backgroundColor"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      ref="elMenu"
    >
      <div class="qblog">
        <router-link to="/">QBLOG</router-link>
      </div>
      <el-sub-menu index="1">
        <template #title>博客</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="2">归档</el-menu-item>
      <el-menu-item index="3">关于我</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup () {
    const activeIndex2 = ref('1')
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const backgroundColor = ref('rgba(0,0,0,0.1)')
    return {
      activeIndex2,
      handleSelect,
      backgroundColor
    }
  },
  mounted () {
    //监听页面滚动位置，改变导航栏的显示
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        this.backgroundColor = '#545c64'
      } else {
        this.backgroundColor = "rgba(0,0,0,0.1)"
      }
    })
  }
})
</script>

<style>
.qblog {
  margin: auto;
  margin-left: 3%;
  font-size: larger;
}
a {
  text-decoration: none;
  color: white;
}
.el-menu {
  padding-right: 1%;
}
</style>